<template>
	<div class="login">
		<div class="head">
			<h1>
				<img src="../../assets/images/logo108.png" alt="" />
				优赞科技
			</h1>
		</div>
		<div class="main">
			<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm" :size="formSize" status-icon @submit.native.prevent>
				<h2>登录</h2>
				<el-form-item prop="user_name"><el-input v-model="ruleForm.user_name" placeholder="账号" /></el-form-item>
				<el-form-item prop="password"><el-input type='password' v-model="ruleForm.password" placeholder="密码" /></el-form-item>
				<el-button type="primary" native-type="submit" class="submit" style="width: 100%;" @click="submitForm(ruleFormRef)">登录</el-button>
			</el-form>
		</div>
		<div class="footer">
			<p>
				<span>©2022 hnc 版权所有 湘ICP备19018386号-2</span>
				<span>技术支持：湖南长沙优赞科技有限公司</span>
			</p>
		</div>
	</div>
</template>

<script lang="ts" setup>
import md5 from 'js-md5';
import { useMainStore } from '@/store/index.js';
const mainStore = useMainStore();
import { FormInstance, FormRules } from 'element-plus/es/components/index.js';
import { reactive, ref } from 'vue';
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
import { ElMessage } from 'element-plus';
import router from '@/router';

const formSize = ref('default');
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
	user_name: '',
	password: ''
});
// 表单规则
const rules = reactive<FormRules>({
	user_name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
	password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
});

// 登录事件
const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid: boolean, fields: object) => {
		if (valid) {
			let params = {
				user_name:ruleForm.user_name,
				password: md5(ruleForm.password),
				isAdmin:true
			}
			proxy.$post('/login', params).then((res: any) => {
				if (res.code === 200) {
					ElMessage({
						message: '登录成功',
						type: 'success'
					});
					mainStore.token = res.data.token;
					mainStore.userInfo = res.data.user;
					router.push('/home');
				} else {
					ElMessage({
						message: res.msg,
						type: 'warning'
					});
				}
			});
		} else {
			console.log('error submit!', fields);
		}
	});
};
</script>

<style scoped lang="scss">
.login {
	width: 100vw;
	height: 100vh;
	background-image: url(../../assets/images/login-bg.jpg);
	background-size: cover;
	background-position: center;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	padding: 20px;
	align-items: center;
	.head {
		color: #fff;
		align-self: flex-start;
		h1 {
			display: flex;
			align-items: center;
			font-size: 25px;
			img {
				width: 30px;
				height: 30px;
				margin-right: 15px;
			}
		}
	}
	.main {
		width: 400px;
		height: 300px;
		padding: 60px;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		box-shadow: 0px 0px 10px 4px rgba($color: #000000, $alpha: 0.1);
		.demo-ruleForm {
			width: 100%;
			h2 {
				font-size: 22px;
				margin-bottom: 20px;
			}
		}
		.submit {
			background-image: url(../../assets/images/login-bg.jpg);
			border: none;
			background-size: 1000px;
			background-position: center;
			&:hover {
				box-shadow: 0 0 10px 1px #d9eaed;
			}
		}
	}
	.footer {
		text-align: center;
		color: #eee;

		span {
			margin-right: 50px;
			font-size: 12px;
		}
	}
}
</style>
